<template>
	<view>
		<view>
			<view style="width: 90%;margin: 10rpx auto;background-color: #fff; border-radius: 20px">
				<view class="home-title-main">
					<view v-if="infoObj.title.length>=4" style="font-size: 40rpx;font-weight700;color: black;">
						{{blackTitle}}<text style="color: red;">{{redTitle}}</text>{{blackTitle1}}
					</view>
					<view v-else style="font-size: 40rpx;font-weight700;color: black;">{{bigTitle}}</view>
					<text style="margin-left: 10rpx;">{{infoObj.titleVice}}</text>
				</view>
				<scroll-view scroll-x="true" class="scroll-view" show-scrollbar="false">
					<view class="re_zu" v-for="(pro, index) in productList" :key="index"
						@click="$onTo('/pagesClass-rich/product/product?productId=' + pro.productId)">
						<view class="hot" v-show="index<3">
							<text class="hot_nub">{{ index+1 }}</text>
							<view class="hot_hot">HOT</view>
						</view>
						<image style="width: 190rpx;height: 200rpx;border-radius: 20rpx;" :lazy-load="true"
							mode="aspectFit" :webp="true" :src="pro.src"></image>
						<view class="re_zu_name"><text class="re_zu_nam_text">{{ pro.name }}</text></view>
						<view class="re_zu_n"><text class="re_zu_nl">￥</text>{{ pro.lowestSalePrice}}
							<text class="re_zu_nl" v-if="pro.rentOrPurchase!=2">/天起1</text>
							<!-- <text class="re_zu_nl" v-else>/起</text> -->
						</view>
						<!-- <view class="re_zu_n_show">{{ pro.lowestSalePrice + 2 }}/天</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		request,
		getUserId,
	} from "@/utils";
	import {
		APP_APPID
	} from "../../utils/constant.js"
	export default {
		name: "IndexRezu",
		props: {
			infoObj: {
				type: Object,
				default: {},
			},
			productList: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				hotProList: [],
				appid: APP_APPID,
				style_type: 0,
				appleActiveList: {},
				//热租榜单下导航栏 
				hotcurrent: 0,


				bigTitle: '',
				blackTitle: '',
				redTitle: '',
				blackTitle1: '',




				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,

			};
		},
		mounted() {
			console.log('首页传给热销畅版的info', this.infoObj);
			console.log('首页传给热销畅版的product', this.productList);
			this.jiequTitle(this.infoObj.title)
		},
		created() {},
		methods: {
			// 标题截取前四个字
			jiequTitle(str) {
				if (str.length >= 4) {
					this.blackTitle = str.slice(0, 2)
					this.redTitle = str.slice(2, 3)
					this.blackTitle1 = str.slice(3, 4)
					console.log('截取截取截取', this.blackTitle, this.redTitle, this.blackTitle1);
				} else {
					this.bigTitle = str
				}

			}
		},
	};
</script>
<style lang="scss" scoped>
	.home-title-main {
		position: relative;
		width: 100%;
		height: 60rpx;
		line-height: 50rpx;
		display: flex;
		font-weight: 600;
		font-size: 24rpx;
		color: #666;
		border-bottom: 1rpx solid rgb(219, 216, 216);

		.more {
			background: url("../../static/RICHindexReZu/RICHmore.png");
			background-size: 100rpx 45rpx;
			position: absolute;
			right: 20rpx;
			padding-left: 20rpx;

			.vice {
				height: 33rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: red;
				line-height: 33rpx;
			}

			.arrow {
				width: 12rpx;
				height: 18rpx;
				margin: 0 11rpx;
			}
		}
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.scroll-view {
		padding-top: 25rpx;
		white-space: nowrap;

		.re_zu {
			width: 29%;
			margin-right: 40rpx;
			display: inline-block;
			vertical-align: top;
			position: relative;

			.hot {
				position: absolute;
				left: 15rpx;
				height: 60rpx;
				width: 34rpx;
				z-index: 199;
				background: url("../../static/RICHindexReZu/RICHhot3.png");
				background-repeat: no-repeat;
				color: white;
				font-size: 20rpx;
				text-align: center;
			}

			.hot_hot {
				font-size: 15rpx;
				margin-top: -6rpx;
			}
		}

		.re_zu:nth-of-type(2) .hot {
			background: url("../../static/RICHindexReZu/RICHhot2.png");
			background-repeat: no-repeat;
		}

		.re_zu:first-child .hot {
			background: url("../../static/RICHindexReZu/RICHhot1.png");
			background-repeat: no-repeat;
		}

		.re_zu_name {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 10rpx;

			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			.re_zu_nam_text {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				font-family: Arial;
				word-break: break-all;
				/*  #ifndef  MP-ALIPAY  */
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				/*  #endif  */

				/*  #ifdef  MP-ALIPAY  */
				word-break: break-all;
				/*  #endif  */
			}
		}

		.re_zu_n {
			font-size: 30rpx;
			font-weight: bold;
			color: #ec612a;
			text-align: center;
			margin-bottom: 20rpx;

			.re_zu_nl {
				font-size: 22rpx;
			}
		}

		.re_zu_n_show {
			font-size: 12px;
			font-weight: 500;
			color: #999999;
			text-align: center;
			text-decoration: line-through;
		}
	}
</style>